// 道路
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { useEffect } from 'react'
export function parseShape(shape) {
  return shape.split(' ').map(coord => coord.split(',').map(Number));
}

const App = () => {
  useEffect(() => {

    const scene = new THREE.Scene();

    const width = window.innerWidth;
    const height = window.innerHeight;
    const k = width / height;
    const s = 200;

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(0, 0, 500);
    camera.lookAt(scene.position);// 设置相机指向场景的方向

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); // 设置渲染区域尺寸

    document.body.appendChild(renderer.domElement)// body元素种插入canvas对象

    function render() {
      renderer.render(scene, camera)
    }
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      render()
    })


    const edge = {
      id: ":10_2",
      lane: [
        {
          id: ":10_2_0",
          index: "0",
          speed: "6.49",
          length: "9.03",
          shape: "-10,0 10,0"
        },
      ]
    }
    const cords = edge.lane.map(lane => {
      return parseShape(lane.shape).map(coord => new THREE.Vector3(coord[0], coord[1]))
    })

    for (let i = 0; i < cords.length; i++) {
      const cord = cords[i];
      console.log('cords', cord);
      const curve = new THREE.LineCurve3(cord[0], cord[1])
      const points = curve.getPoints()
      // 创建一个顶点缓冲几何体
      const geometry = new THREE.BufferGeometry().setFromPoints(points);
      // 线条渲染模式
      const material = new THREE.LineBasicMaterial({
        color: 0xffffff, //线条颜色
      });
      // 创建线模型对象   构造函数：Line、LineLoop、LineSegments
      const line = new THREE.Line(geometry, material);
      // 把物体添加进场景中
      scene.add(line);
    }

    render()

  }, []);

}

export default App;